<script setup lang='ts'>
import { useResizeObserver, useDebounceFn, useFullscreen } from "@vueuse/core";


const { isFullscreen, toggle } = useFullscreen();

defineOptions({
  name: ''
})

const appStore = useAppStore()


function Fullscreen() {
  appStore.Fullscreen = true

  console.log('打开全屏', appStore.Fullscreen)

  document.body.requestFullscreen();


}

function ExitFullscreen() {
  appStore.Fullscreen = false

  console.log('关闭全屏', appStore.Fullscreen)

  document.exitFullscreen();


}


window.onresize = function () {
  var isFull = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
  if (isFull) {
    console.log('全屏')
  } else {
    console.log('没有全屏')
  }
}




onMounted(() => {

})


const tapFullDiv = () => {
  toggle();
  setTimeout(() => {
    if (isFullscreen.value) {
      console.log(isFullscreen.value, 11)
      // tagsViews[6].icon = ExitFullscreen;
      // tagsViews[6].text = $t("buttons.hswholeExitFullScreen");
    } else {
      console.log(isFullscreen.value, 22)

      // tagsViews[6].icon = Fullscreen;
      // tagsViews[6].text = $t("buttons.hswholeFullScreen");
    }
  }, 100);
}


</script>

<template>
  <div class="fixed right-[40px] top-[20px]  cursor-pointer xwxs:(hidden ) xwsm:(block)" style="z-index:200;"
    @click="tapFullDiv()">
    <!-- @click="Fullscreen()" -->
    <svg v-if="!isFullscreen" t="1725791471619" class="icon" viewBox="0 0 1024 1024" version="1.1"
      xmlns="http://www.w3.org/2000/svg" p-id="4250" width="30" height="30">
      <path
        d="M285.866667 810.666667H384v42.666666H213.333333v-170.666666h42.666667v98.133333l128-128 29.866667 29.866667-128 128z m494.933333 0l-128-128 29.866667-29.866667 128 128V682.666667h42.666666v170.666666h-170.666666v-42.666666h98.133333zM285.866667 256l128 128-29.866667 29.866667-128-128V384H213.333333V213.333333h170.666667v42.666667H285.866667z m494.933333 0H682.666667V213.333333h170.666666v170.666667h-42.666666V285.866667l-128 128-29.866667-29.866667 128-128z"
        fill="#444444" p-id="4251"></path>
    </svg>



    <!-- @click="ExitFullscreen()" -->
    <svg v-else t="1725791736483" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
      p-id="4404" width="30" height="30">
      <path
        d="M354.133333 682.666667H256v-42.666667h170.666667v170.666667H384v-98.133334L243.2 853.333333l-29.866667-29.866666L354.133333 682.666667z m358.4 0l140.8 140.8-29.866666 29.866666-140.8-140.8V810.666667h-42.666667v-170.666667h170.666667v42.666667h-98.133334zM354.133333 384L213.333333 243.2l29.866667-29.866667L384 354.133333V256h42.666667v170.666667H256V384h98.133333z m358.4 0H810.666667v42.666667h-170.666667V256h42.666667v98.133333L823.466667 213.333333l29.866666 29.866667L712.533333 384z"
        fill="#444444" p-id="4405"></path>
    </svg>


  </div>
</template>

<style lang='scss' scoped></style>
